<template>
  <div v-if="isShow">
    <goodsSwiper :res="goodsInfo" />
    <goodsBase :res="goodsInfo"></goodsBase>
    <!-- 店铺 -->
    <div class="card">
      <goodsStore :id="goodsInfo?.data?.storeId" />
    </div>
    <div class="card">
      <div class="goods-active" :style="gradient">商品介绍</div>
      <div pb-300rpx>
        <goodsIntro :res="goodsInfo?.data?.goodsSku?.mobileIntro" />
      </div>
    </div>
    <nut-toast ref="toastRef" />
    <div position-fixed bottom-0 bg-white w-full flex justify-center>
      <div p-32rpx w-full>
        <nut-button block type="warning" @click="bill()">立即购买</nut-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getPointsGoodsDetail } from '@/api/promotion'
import goodsBase from '@/components/goods/template/goods-base.vue' //商品基础
import goodsSwiper from '@/components/goods/template/goods-swiper.vue' //商品轮播
import goodsStore from '@/components/goods/template/goods-store.vue' //当前商品店铺
import goodsIntro from '@/components/goods/template/goods-intro.vue' //商品介绍
import { onLoad } from '@dcloudio/uni-app'
import type { ToastInst } from 'nutui-uniapp'
import { billOrder } from '@/api/trade'
import { colors } from '@/constants/injection-key'
const isShow = ref<boolean>(false)
const toastRef = ref<ToastInst>()
const goodsInfo = ref<any>({
  data: ''
})
const gradient = { '--gradient-left': colors.themeColor, '--gradient-right': colors.disabledLightColor }
const routerVal = ref<any>('')
// 初始化积分商品详情
async function init() {
  const res = await getPointsGoodsDetail(routerVal.value.id)
  isShow.value = true
  if (res.data.success) {
    goodsInfo.value.data = res.data.result
    goodsInfo.value.data.goodsGalleryList = res.data.result.thumbnail.split(',')

    console.log(goodsInfo.value)
  }
}

onLoad((options: any) => {
  routerVal.value = options
  init()
})

async function bill() {
  try {
    let data = {
      skuId: goodsInfo.value.data.goodsSku.id,
      num: 1,
      cartType: 'POINTS'
    }
    toastRef.value?.showToast['loading']('加载中', {
      cover: true,
      duration: 0
    })
    const res = await billOrder(data)
    if (res.data.success) {
      toastRef.value?.hideToast()
      uni.navigateTo({
        url: `/pages/mine/order/fillorder?way=${data.cartType}`
      })
    } else {
      toastRef.value?.hideToast()
    }
  } catch (error) {
    toastRef.value?.hideToast()
  }
}
</script>

<style scoped lang="scss">
.goods-active {
  font-weight: 700;
  position: relative;
  display: inline;
  line-height: 1.75;

  &::before {
    position: absolute;
    left: 50%;
    bottom: -10rpx;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    content: '';
    display: block;
    width: 52rpx;
    height: 6rpx;
    background-image: linear-gradient(90deg, var(--gradient-left), var(--gradient-right));
  }
}

.card {
  margin: 20rpx 0;
  padding: 32rpx;
}
</style>
